<template>
  <!-- 分页封装 -->
  <div class="container">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="pageindex"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "Pagination",
  props: {
    total: {
      //总数据条数
      required: false, //是否必填
      default: 0, //默认值为0
    },
    pageSize: {
      required: false, //是否必填
      default: 10, //默认显示10条
    },
  },
  data() {
    return {
      pageindex: 1,
    };
  },
  watch: {
    pageindex(newValue,oldValue){
      this.pageindex = newValue
    }
  },
  methods: {
    handleSizeChange(val) {
      this.$emit("sizeChange", val);
    },
    handleCurrentChange(val) {
      this.$emit("currentChange", val);
    }
  }
};
</script>

<style lang="less" scoped>
</style>